<template>
    <div id="live-root">
        <NavigationBar></NavigationBar>
		<img src="/imgs/liveroom/banner1.jpg" style="width:100%;display:block;">
		


		<div id="taggleComponent">
			<input type="radio" name="tab" value="OpenClass" v-model="comType" id="open-class" class="hide">
			<label for="open-class" class="tab-item">公开课</label>
			<input type="radio" name="tab" value="VIPClass" v-model="comType" id="vip-class" class="hide">
			<label for="vip-class" class="tab-item">VIP班</label>
		</div>

		<keep-alive>
			<component :is="comType" class="com"></component>
		</keep-alive>



		<Footer/>
    </div>
</template>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script>
import NavigationBar from '@/components/NavigationBar.vue'
import OpenClass from '@/components/LiveRoom/OpenClass.vue'
import VIPClass from '@/components/LiveRoom/VIPClass.vue'
import Footer from '@/components/Footer.vue'
export default {
	components:{
		NavigationBar,
		OpenClass,
		VIPClass,
		Footer,
	},
	data () {
		return {
			comType:'OpenClass'
		};
	},
}

</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
#live-root /deep/ #root{
    background-color: #020F1C;
    color: white;
}
#live-root /deep/ .nav{
    width: 1200px;
}
#live-root{
	background-color: #f4f4f4;
}
.hide{
	display: none;
}
#taggleComponent{
	width: 100%;
	text-align: center;
	background-color: white;
	padding-top: 30px;
}
.tab-item{
	display: inline-block;
	width: 8%;
	line-height: 50px;
	margin: 0 20px;
}
.hide:checked+label{
	color: #02B2FB;
	border-bottom: 2px solid #02B2FB;
}
.com{
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 100px;
}
</style>